<template>
  <div class="header">
    <div class="title">晓塘乡导游预约系统</div>
    <div class="subtitle">浙江省宁波市象山县晓塘乡</div>
  </div>
  <div class="info-section">
    <div class="info-item">
      <van-icon name="clock" color="#07c160" size="20px" />
      <span class="info-span">服务时间：08:00 — 18:00</span>
    </div>
    <div class="info-item">
      <van-icon name="volume" color="#07c160" size="20px" />
      <span class="info-span">导游语言：中文/英文</span>
    </div>
  </div>

  <h4 style="margin-left: 20px;">选择导游</h4>
  <div class="guide-section">
    <div class="guide-scroll-wrapper">
      <div class="guide-scroll">
        <div v-for="(guide, index) in guides" :key="index" class="guide-option"
          :class="{ active: currentGuideIndex === index }" @click="selectGuide(index)">
          <img class="guide-avatar" :src="guide.avatar" />
          <div class="guide-info">
            <span class="guide-name">{{ guide.name }}</span>
            <span class="guide-tag">{{ guide.tag }}</span>
            <span class="guide-price">¥{{ guide.price }}/小时</span>
          </div>
        </div>
      </div>
    </div>
    <van-divider :style="{ borderColor: '#111' }" />
    <div v-if="currentGuide" class="guide-detail">
      <div class="detail-header">
        <img class="detail-avatar" :src="currentGuide.avatar">
        <div class="detail-info">
          <span class="detail-name">{{ currentGuide.name }}</span>
          <van-rate v-model="currentGuide.rating" allow-half readonly color="#ffd21e" />
          <span class="detail-service">已累计服务 {{ currentGuide.serviceCount }} 次</span>
        </div>
      </div>
      <div class="detail-content">
        <div class="detail-title">导游介绍:
          <span class="detail-span">{{ currentGuide.description }}</span>
        </div>
        <div class="detail-title">服务范围:
          <span class="detail-span">{{ currentGuide.serviceArea }}</span>
        </div>
      </div>
    </div>
  </div>
  <div class="time-section">
    <van-divider :style="{ borderColor: '#111' }" />
    <span class="section-title">预约时间</span>
    <span class="sub-title">选择日期</span>
    <div class="date-scroll-wrapper">
      <div class="date-scroll">
        <div v-for="(date, index) in dateList" :key="index" class="date-item" :class="{ 'active': date.isSelected }"
          @click="selectDate(date)">
          <div>
            {{ date.formattedDate.split('-')[1] }}-{{ date.formattedDate.split('-')[2] }}
          </div>
          <div>
            {{ date.isToday ? '今天' : '周' + date.weekday }}
          </div>
        </div>
      </div>
    </div>
    <van-divider :style="{ borderColor: '#111' }" />
    <span class="sub-title">选择时间</span>
    <div class="time-options">
      <div v-for="(time, index) in timeOptions" :key="index" class="time-option"
        :class="{ 'selected': selectedTimeIndex === index }" @click="selectTime(index)">{{ time }}</div>
    </div>
    <van-divider :style="{ borderColor: '#111' }" />
    <div class="duration-selector">
      <van-field v-model="fieldValue" is-link readonly size="large" label="服务时长" placeholder="选择时长"
        @click="showPicker = true" />
      <van-popup v-model:show="showPicker" round position="bottom">
        <van-picker :columns="columns" @cancel="showPicker = false" @confirm="onConfirm" />
      </van-popup>
    </div>
    <van-divider :style="{ borderColor: '#111' }" />
    <div class="price-calculation">
      <span>费用计算：</span>
      <span class="price" v-if="calculatedPrice === 0">
        请先完成预约内容
      </span>
      <span v-else><span class="price">¥{{ calculatedPrice }}</span>
        <span class="price-note">({{ currentGuide.price }}元/小时×{{ fieldValue }}小时)</span></span>
    </div>
  </div>
  <van-button class="submit-btn" type="primary" block @click="submitBooking">立即预约</van-button>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';
import { showToast } from 'vant';

// 数据
const guides = ref([
  {
    "id": 1,
    "name": "慕云舒",
    "avatar": "/src/assets/index/nwj.jpg",
    "tag": "诗意导游",
    "price": 160,
    "rating": 4.6,
    "serviceCount": 980,
    "description": "熟读各类诗词，讲解时能巧妙引用，为游客营造诗意氛围。熟知晓塘乡各个角落的优美景致，善于用诗意语言描绘，带游客感受乡野间的诗意之美。",
    "serviceArea": "晓塘乡全域，擅长讲解有自然景观和古村落的区域"
  },
  {
    "id": 2,
    "name": "风逸尘",
    "avatar": "/src/assets/index/lhk.jpg",
    "tag": "户外探险导游",
    "price": 180,
    "rating": 4.5,
    "serviceCount": 850,
    "description": "热爱户外探险，拥有丰富的野外生存技能。能带领游客深入晓塘乡未开发的山林区域，体验刺激的探险之旅，同时保障游客的安全。",
    "serviceArea": "晓塘乡的山林、溪流等户外探险区域"
  },
  {
    "id": 3,
    "name": "花漾",
    "avatar": "/src/assets/index/nwj.jpg",
    "tag": "美食导游",
    "price": 130,
    "rating": 4.3,
    "serviceCount": 1100,
    "description": "是个资深吃货，对晓塘乡的美食了如指掌。不仅能带领游客品尝地道美食，还能介绍美食的制作工艺和背后的故事，让游客从美食角度了解晓塘乡。",
    "serviceArea": "晓塘乡内的各类美食店铺和特色农产品产区"
  },
  {
    "id": 4,
    "name": "夜羽",
    "avatar": "/src/assets/index/lhk.jpg",
    "tag": "民俗文化导游",
    "price": 150,
    "rating": 4.4,
    "serviceCount": 720,
    "description": "热衷于研究晓塘乡的民俗文化，能生动地讲解当地的传统节日、婚丧嫁娶等民俗活动。带领游客参与民俗体验，感受浓郁的乡土风情。",
    "serviceArea": "晓塘乡举办民俗活动的区域和展示民俗文化的场馆"
  },
  {
    "id": 5,
    "name": "星澜",
    "avatar": "/src/assets/index/nwj.jpg",
    "tag": "摄影创作导游",
    "price": 170,
    "rating": 4.7,
    "serviceCount": 690,
    "description": "自身是摄影爱好者，熟悉晓塘乡不同季节、不同时段的光影变化。能指导游客进行摄影创作，帮助游客拍摄出富有艺术感的照片，记录旅行美好瞬间。",
    "serviceArea": "晓塘乡内适合摄影创作的景点和路线"
  }
]
);
// 日期选择相关
const dateList = ref([]);

// 生成日期列表
const generateDateList = () => {
  const today = new Date();
  const days = ['日', '一', '二', '三', '四', '五', '六'];
  for (let i = 0; i < 5; i++) {
    const date = new Date();
    date.setDate(today.getDate() + i);
    dateList.value.push({
      date: date,
      formattedDate: date.toISOString().split('T')[0],
      weekday: days[date.getDay()],
      isToday: i === 0,
      isSelected: i === 0,
    });
  }
};



// 当前选中索引
const currentGuideIndex = ref(0);
const currentGuide = ref();
// 当选中导游索引变化时，更新当前导游信息
const updateCurrentGuide = () => {
  currentGuide.value = guides.value[currentGuideIndex.value];
};
// 选择日期
const selectDate = (date) => {
  dateList.value.forEach(item => {
    item.isSelected = item === date;
  });
};
// 选择导游
const selectGuide = (index) => {
  currentGuideIndex.value = index;
  updateCurrentGuide();
};
onMounted(() => {
  selectedTimeIndex.value = 0;
  generateDateList();
  updateCurrentGuide();
})

const timeOptions = ref(['08:00', '09:00', '10:00',
  '11:00', '13:00', '14:00', '15:00', '16:00', '17:00']
);

const selectedTimeIndex = ref(null);
const selectTime = (index) => {
  console.log(index);
  selectedTimeIndex.value = index;
};

const columns = [
  { text: '1小时', value: '1' },
  { text: '2小时', value: '2' },
  { text: '3小时', value: '3' },
  { text: '4小时', value: '4' },
];
const fieldValue = ref("");
const showPicker = ref(false);
const onConfirm = ({ selectedOptions }) => {
  showPicker.value = false;
  fieldValue.value = selectedOptions[0].value;
};
const calculatedPrice = computed(() => {
  if (!fieldValue.value) {
    return 0;
  }
  return currentGuide.value.price * fieldValue.value;
});
const submitBooking = () => {
    showToast('预约成功');
}
</script>

<style lang="scss" scoped>
.header {
  background-color: #8fc201;
  color: white;
  padding: 20px;
  border-radius: 0 0 20px 20px;

  .title {
    font-size: 24px;
    font-weight: bold;
  }
}

.info-section {
  background-color: white;
  padding: 20px;
  margin-top: 10px;

  .info-item {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    font-weight: bolder;

    .van-icon {
      margin-right: 10px;
    }

  }
}

.guide-section {
  background-color: white;
  padding: 10px;

  .guide-scroll-wrapper {
    width: 100%;
    padding: 5px 0;
    overflow: hidden;

    .guide-scroll::-webkit-scrollbar {
      display: none;
    }

    .guide-scroll {
      display: flex;
      overflow-x: auto;
      scroll-snap-type: x proximity;
      gap: 12px;
      -webkit-overflow-scrolling: touch;
    }

    /* 选中状态 */
    .guide-option.active {
      background: var(--van-primary-color);
      color: white;

      .guide-tag {
        color: white
      }

      .guide-price {
        color: white;
      }
    }

    .guide-option {
      border: 1px solid #ccc;
      flex: 0 0 auto;
      width: 30%;
      padding: 12px;
      border-radius: 8px;
      background: #fff;
      scroll-snap-align: center;
      transition: all 0.3s;

      .guide-avatar {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        display: block;
        margin: 0 auto 8px;
      }

      .guide-info {
        text-align: center;
        font-size: 12px;
      }

      .guide-name {
        font-size: 15px;
        display: block;
        font-weight: bold;
      }

      .guide-tag {
        display: block;
        color: #999;
        margin: 4px 0;
      }


      .guide-price {
        display: block;
        color: var(--van-danger-color);
        font-weight: bold;
      }

    }

  }
}

.guide-detail {
  padding: 0 10px;

  .detail-header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;

    .detail-avatar {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      margin-right: 20px;
    }

    .detail-info {
      display: flex;
      flex-direction: column;
      column-gap: 2px;

      .detail-name {
        font-size: 20px;
        font-weight: bold;
      }

      .detail-rating {
        margin-bottom: 8px;
      }

      .detail-service {
        font-size: 16px;
        color: #999;
      }
    }
  }

  .detail-content {
    display: flex;
    flex-direction: column;
    row-gap: 10px;

    .detail-title {
      font-size: 18px;
      font-weight: bold;
      color: #333;
    }

    .detail-span {
      font-size: 16px;
      line-height: 1.6;
    }
  }
}

.time-section {
  background-color: white;
  padding: 20px;
  display: flex;
  flex-direction: column;

  .section-title {
    font-size: 20px;
    font-weight: bold;
  }

  .sub-title {
    margin-bottom: 10px;
    font-size: 18px;
    color: #333;
  }

  .date-scroll-wrapper {
    width: 100%;
    padding: 5px 0;
    overflow: hidden;

    .date-scroll {
      display: flex;
      overflow-x: auto;
      scroll-snap-type: x proximity;
      gap: 12px;
      -webkit-overflow-scrolling: touch;

      &::-webkit-scrollbar {
        display: none;
      }

      .date-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px;
        border: 1px solid #d3d3d3;
        border-radius: 10px;
        background-color: white;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        width: 100px !important;
        flex: 0 0 100px;

        &.active {
          background-color: var(--van-primary-color);
          color: #fff;
        }
      }
    }
  }


  .time-options {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;

    .time-option {
      margin: 5px;
      border: 1px solid #d3d3d3;
      border-radius: 20px;
      overflow: hidden;
      text-align: center;
      padding: 10px;

      &.selected {
        background-color: var(--van-primary-color);
        color: white;
      }
    }
  }

  .duration-selector {
    display: flex;
    align-items: center;

    .duration-label {
      font-size: 18px;
      margin-right: 10px;
    }

    .duration-picker {
      padding: 10px 15px;
      border: 1px solid #36baf6;
      border-radius: 10px;
      color: #36baf6;
      font-size: 16px;
    }
  }

  .price-calculation {
    font-size: 18px;

    .price {
      font-weight: bold;
      color: #ff976a;
      margin: 0 10px;
    }

    .price-note {
      font-size: 16px;
      color: #999;
    }
  }
}
</style>